<template>
	<view class="container">
		<view class="warp u-m-t-20">
			<u-form :form="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="产业" prop="industry">
					<view style="width:100%;text-align: right;" @click="cySelect">{{form.industry || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="个人身份" prop="userIdentify">
					<view style="width:100%;text-align: right;" @click="qySelect">{{form.userIdentify || "请选择"}}</view>
				</u-form-item>
				<block v-if="model.wxy != '学习团队'">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" v-if="specialtyList != undefined" label="具体身份" prop="specialty">
					<view style="width:100%;text-align: right;" @click="showLB">{{form.specialty || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="职称" prop="profession">
					<u-input v-if="specialtyList[specialtyKey] === undefined" disabled="disabled" placeholder="无" v-model="form.profession" input-align="right" />
					<view v-else class="value" style="width:100%;text-align: right;" @click="showProfession">{{form.profession || "请选择职称"}}</view>
					<u-picker v-if="specialtyList[specialtyKey] != undefined" mode="selector" v-model="professionShow" @confirm="function(e){return confirm(e,specialtyList[specialtyKey].jobTitle,'profession')}"
					 :range="specialtyList[specialtyKey].jobTitle"></u-picker>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="执业资格" prop="credentials">
					<u-input v-if="specialtyList[specialtyKey] === undefined"  disabled="disabled" placeholder="无" v-model="form.credentials" input-align="right" />
					<view v-else class="value" style="width:100%;text-align: right;" @click="showCredentials">{{form.credentials || "请选择职称"}}</view>
					<u-picker v-if="specialtyList[specialtyKey] != undefined" mode="selector" v-model="credentialsShow" @confirm="function(e){return confirm(e,specialtyList[specialtyKey].qualificationCert,'credentials')}"
					 :range="specialtyList[specialtyKey].qualificationCert"></u-picker>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="擅长领域" prop="expertise">
					<view style="width:100%;text-align: right;" @click="scSelect">{{form.expertise || "请选择"}}</view>
				</u-form-item>
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" label-width="200" v-if="cy == '1135'" label="专业方向" prop="professional">
					<view style="width:100%;text-align: right;" @click="mSelect">{{form.professional || "请选择"}}</view>
				</u-form-item> -->
				</block>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="地域" prop="region">
				 <view style="width:100%;text-align: right;" @click="cityActive = true">{{form.region || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowDy" v-model="form.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input> -->
				</u-form-item>
				
				
				<block v-if="model.wxy != '学习团队'">
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="性别" prop="gender">
					<u-input :border="border" type="select" :select-open="selectShowXb" v-model="form.gender" placeholder="请选择"
					 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowXb = true"></u-input>
				</u-form-item>
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="人数" prop="num">
					<u-input :border="border" type="number" v-model="form.num" placeholder="请输入"
					 placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
				</u-form-item> -->
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="学历" prop="requireEdu">
					<u-input :border="border" type="select" :select-open="selectShowRzfs" v-model="form.requireEdu" placeholder="请选择"
					 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowRzfs = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-position="labelPosition" label="在职情况"
				 label-width="490" prop="incumbency">
					<u-radio-group v-model="form.incumbency" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="square" v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>
				</block>
				<u-gap :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
			</u-form>
		</view>
		<view class="warp u-m-t-20">

			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="sexData" v-model="selectShowXb" @confirm="selectConfirmXb"></u-select>
			<u-select mode="single-column" :list="rsList" v-model="selectShowJzjd" @confirm="selectConfirmJzjd"></u-select>
			<u-select mode="single-column" :list="fetchDict.education" v-model="selectShowRzfs" @confirm="selectConfirmRzfs"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value"
			 label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<TriTree ref="triTree" :range="fetchDict.people_field_engineering" confirmColor="rgb(41, 121, 255)" @confirm="setChooseField"></TriTree>

			<TriTree ref="ptriTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return psetChooseType(e,'professional')}"></TriTree>
			
			<TriTree ref="sctriTree" :range="fetchDict.all_adept_field" @confirm="function (e){return psetChooseType(e,'expertise')}"></TriTree>
			<TriTree ref="cyTree" :multiple="false" :range="fetchDict.industry" @confirm="function (e){return setChooseType(e,'industry')}"></TriTree>
			<TriTree ref="qyTree" :range="fetchDict.company_type" @confirm="function (e){return psetChooseType(e,'userIdentify')}"></TriTree>
			
				<u-picker mode="selector" v-model="specialtyShow" @confirm="function (e){return confirm(e,specialtyList,'specialty')}"
				 :range="specialtyList" :range-key="rangKey"></u-picker>
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue'
	export default {
		components: {
			citySelect
		},
		data() {
			let that = this;
			return {
				cityActive: false,
				/*个人选择产业*/
				identity:'个人身份',
				userIdentifyShow:false,
				userIdentifyList:[],
				mSelectShow: false,
				cy: '',
				specialtyShow: false,
				specialtyList: [],
				specialtyKey: '',
				rangKey: 'pname',
				professionShow: false,
				credentialsShow: false,
				rangKey: 'pname',
				fetchDict: [],
				/**/
				defaultValue: [3],
				listCitys: [],
				listXmlbs: [],
				show: false,
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				pattern: '',
				profession: [],
				/**
				 * form验证
				 * */
				sexData: [{
						label: '不限',
						value: '男'
					},{
						label: '男',
						value: '男'
					},
					{
						label: '女',
						value: '女'
					}
				],
				model: {},
				form: {},
				startTime: '',
				endTime: '',
				selectList: [],
				xbList: [{
						value: '男',
						label: '男'
					},
					{
						value: '女',
						label: '女'
					}
				],
				fwnrList: [],
				rsList: [],
				rzfsList: [{
						value: '专科',
						label: '专科'
					},
					{
						value: '本科',
						label: '本科'
					},
					{
						value: '研究生',
						label: '研究生'
					},
					{
						value: '博士',
						label: '博士'
					}
				],
				rules: {
					specialty: [{
						required: false,
						message: '请选择专业',
						trigger: 'change'
					}],
					profession: [{
						required: false,
						message: '请输入职称',
						trigger: 'change'
					}],
					credentials: [{
						required: false,
						message: '请选择职业资格',
						trigger: 'change'
					}],
					region: [{
						required: false,
						message: '请选择地域',
						trigger: 'change'
					}],
					gender: [{
						required: false,
						message: '请选择性别',
						trigger: 'change'
					}],
					expertise: [{
						required: false,
						message: '请选择擅长领域',
						trigger: 'change'
					}],
					num: [{
						required: false,
						message: '请选择人数',
						trigger: 'change'
					}],
					requireEdu: [{
						required: false,
						message: '请选择学历',
						trigger: 'change'
					}],
					incumbency: [{
						required: false,
						message: '请选择在职情况',
						trigger: 'change'
					}]

				},
				checkboxList: [{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},
				],
				checkboxListTwo: [

					{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},
				],
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowDy: false,
				selectShowFwnr: false,
				selectShowXmlb: false,
				selectShowJzjd: false,
				selectShowRzfs: false,
				selectShowLyxy: false,
				selectShowXb: false,
				radio: '',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {
			
		},
		onShow() {
			// this.wsDictionary();
			// this.wxyDictionary();
			// this.wyxDictionary();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch:{
			fetchDict:{
				handler(e,v){
					console.log("handler",v);
				},deep:true,immediate:true
			}
		},
		onLoad(options) {
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
				this.model.teamUser = {};
			}
			console.log("model",this.model);
			//获取省市区
			this.cityList();
			var keys = {'keys':['sex','education','people_field_engineering','industry','financing_cooperation_project_category','all_adept_field','company_type']}
			this.dictionaryFetchDict(keys);
			// this.dictionaryFetchDict('education');
			// this.dictionaryFetchDict('people_field_engineering');
			this.getProfession();

			/*个人选择产业*/
			// this.dictionaryFetchDict('industry'); //产业菜单
			 this.getIdentitys(); //身份
			/**/
			// this.dictionaryFetchDict('financing_cooperation_project_category');
			// this.dictionaryFetchDict('all_adept_field');
		},
		methods: {		
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.region = address
			},
			qySelect() {
				this.$refs.qyTree._show()
			},
			scSelect() {
				this.$refs.sctriTree._show()
			},
			/*个人选择产业*/
			showLB() {
				if (this.cy == '') {
					uni.showToast({
						title: "请先选择产业",
						icon: 'none'
					})
					return;
				}
				this.specialtyShow = true;
			},
			mSelectShowClick() {
				if (this.cy === '') {
					uni.showToast({
						title: "请先选择产业",
						icon: 'none'
					})
				} else {
					console.log("areaOfExpertise", this.specialtyList[this.specialtyKey].areaOfExpertise);
					this.mSelectShow = true;
				}
			},
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.cy = item[0].parents.length > 0 ? item[0].parents[0].id : item[0].id;
				var cyValue = item[0].parents.length > 0?item[0].parents[0].label:item[0].label;
				console.log("cyValue",cyValue);
				
					this.getfetchProfessionById(this.cy);
				this.form.profession = '';
				this.form.credentials = '';
				this.form.expertise = '';
				this.form.specialty = '';
				this.form.scly = '';
				
				this.$forceUpdate()
			},
			cySelect() {
				this.$refs.cyTree._show()
			},			
			async getIdentitys(){
				let result = await this.$apis.identify({type:1});
				this.userIdentifyList = result.data;
			},
			mSelect() {
				this.$refs.ptriTree._show()
			},			
			psetChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			/**/
			chooseXmlb() {
				this.$refs.triTree._show()
			},
			setChooseField(item) {
				console.log('item', item)
				this.form.expertise = item[0].label
				this.$forceUpdate()

			},
			credentialsActive() {
				if (this.specialtyKey === '') {
					uni.showToast({
						title: "请先选择专业",
						icon: 'none'
					})
				} else {
					this.addcredentialsActive = true;
				}
			},
			async handleAddCredentials() {
				if (this.credentialsValue === '') {
					this.$refs.uToast.show({
						title: '职称不能为空',
						type: 'warning',
					})
				} else {
					let saveData = this.specialtyList[this.specialtyKey];
					saveData.qualificationCert.push(this.credentialsValue);
					let result = await this.$apis.editProfession(saveData);
					this.form.credentials = this.credentialsValue;
					this.credentialsValue = '';
					this.addcredentialsActive = false;
				}
			},

			professionActive() {
				if (this.specialtyKey === '') {
					uni.showToast({
						title: "请先选择专业",
						icon: 'none'
					})
				} else {
					this.addprofessionActive = true;
				}
			},
			async handleAddProfession() {
				if (this.professionValue === '') {
					this.$refs.uToast.show({
						title: '职称不能为空',
						type: 'warning',
					})
				} else {
					let saveData = this.specialtyList[this.specialtyKey];
					saveData.professionalDirectory.push(this.professionValue);
					let result = await this.$apis.editProfession(saveData);
					this.form.profession = this.professionValue;
					this.professionValue = '';
					this.addprofessionActive = false;
				}
			},
			showProfession() {
				if (this.specialtyKey === '') {
					uni.showToast({
						title: "请先选择专业",
						icon: 'none'
					})
				} else {
					this.professionShow = true;
				}
			},
			showCredentials() {
				if (this.specialtyKey === '') {
					uni.showToast({
						title: "请先选择专业",
						icon: 'none'
					})
				} else {
					this.credentialsShow = true;
				}
			},			
			async getfetchProfessionById(id){
				let result = await this.$apis.fetchProfessionById({id:id});
				this.specialtyList = result.data;
				this.specialtyKey = 0;
			},
			async getProfession(id){
				if(id){
					let result  = await this.$apis.fetchProfessionById({id:id});
					this.specialtyList = result.data;
				}		
			},	
			confirm(e, list, type) {
				if (type == 'specialty') {
					this.form[type] = list[e][this.rangKey];
					var specialtyKey = e[0];
					this.specialtyKey = specialtyKey;
				} else if (type == 'userIdentify') {
					var itemKey = e[0];
					this.form[type] = list[itemKey]['name'];
				} else {
					var itemKey = e[0];
					this.form[type] = list[itemKey];
				}
				console.log("form:", this.form);
			},
			handleClickWeight(e) {
				var form = encodeURIComponent(JSON.stringify(this.form));
				let url = encodeURIComponent(JSON.stringify("release/bidding"));
				if (this.form.wyx == '企业') {
					uni.navigateTo({
						url: '../user/companyWeight?type=' + url + '&row=' + form
					})
				} else if (this.form.wyx == '团队') {
					uni.navigateTo({
						url: '../user/teamWeight?type=' + url + '&row=' + form
					})
				} else {
					uni.navigateTo({
						url: '../user/personWeight?type=' + url + '&row=' + form
					})
				}
			},
			confirmCity(e) {
				this.form.region = '';
				e.map((val, index) => {
					this.form.region += this.form.region == '' ? val.label : '-' + val.label;
				})
			},
			confirmXmlb(e) {
				this.form.expertise = '';
				e.map((val, index) => {
					this.form.expertise += this.form.expertise == '' ? val.label : '-' + val.label;
				})
			},
			async cityList() {
				let result = await this.$apis.fetchArea({
					level: 2
				});
				this.listCitys = result.data;
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
				// debugger
				this.form.incumbency = e;
			},
			// checkbox选择发生变化
			checkboxGroupChange1(e) {
				this.form.xhm = e;
				if (e === "是") {
					this.form.xhmTwo = 1;
				} else {
					this.form.xhmTwo = 0;
				}
			},
			submit() {
				let teamUser = this.form;
				//this.model['intention'] = teamUser;
				var intention = this.model.intention != undefined?this.model.intention:[];
				if(this.form.industry != undefined) intention.push(this.form);
				console.log("intention",intention);
				this.model.intention = intention;
				uni.navigateTo({
					url: '/pages/wisdomcommune/zhihuiTeam?data=' + encodeURIComponent(JSON.stringify(this.model))
				})

			},
			
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmXb(e) {
				this.form.gender = '';
				e.map((val, index) => {
					this.form.gender += this.form.gender == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmJzjd(e) {
				this.form.num = '';
				e.map((val, index) => {
					this.form.num += this.form.num == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmRzfs(e) {
				this.form.requireEdu = '';
				e.map((val, index) => {
					this.form.requireEdu += this.form.requireEdu == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQylx(e) {
				this.form.qylx = '';
				e.map((val, index) => {
					this.form.qylx += this.form.qylx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydy(e) {
				this.form.qydy = '';
				e.map((val, index) => {
					this.form.qydy += this.form.qydy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.form.ppsx = '';
				e.map((val, index) => {
					this.form.ppsx += this.form.ppsx == '' ? val.label : '-' + val.label;
				});
			},
			change(e) {
				if (this.mode == 'range') {
					this.form.sjap = e.startDate + " - " + e.endDate;
					this.startTime = e.startDate;
					this.endTime = e.endDate;
				} else {
					this.form.sjap = e.result;
				}
			},
			changeDate(e) {
				this.form.ppsx = e.result;
			},

			dianji() {
				this.show = true;
			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
